.leaveMessageBox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid #ccc;
  border: none;
  border-radius: 10px;
  transform: translate(-50%, -100%) translate(28px, 60px);
  cursor: pointer;

  .leaveMessageImg {
    width: 26px;
    height: 26px;
    margin-right: 6px;
    border-radius: 50%;
  }
}
.leaveMessageBox::before {
  position: absolute;
  top: 60px;
  left: 28px;
  width: 6px; /* 点的宽度 */
  height: 6px; /* 点的高度 */
  background-color: rgba(255, 255, 255, 0.8); /* 点的颜色 */
  border-radius: 50%; /* 使点变为圆形 */
  content: '';
}
.leaveMessageBox::after {
  position: absolute;
  top: 36px;
  left: 30px; /* 在框的右侧 */
  width: 2px; /* 竖线宽度 */
  height: 25px; /* 高度与父框一致 */
  background-color: rgba(255, 255, 255, 0.8); /* 竖线颜色 */
  content: '';
}
.leaveMessageOption {
  position: fixed;
  bottom: 20px; /* 距离页面底部20px */
  left: 50%;
  z-index: 999999;
  width: 90%; /* 可以调整宽度 */
  max-width: 600px; /* 最大宽度 */
  padding: 36px 16px 16px 16px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 可以设置阴影使其更突出 */
  transform: translateX(-50%); /* 使其水平居中 */
  animation: slideIn 0.5s ease-out forwards; /* 添加动画 */
  textarea {
    color: #fff;
    background: none;
    border: none;
  }
  // textarea:focus{
  //   border: none !important;
  //   box-shadow: none !important;
  // }
  /* 定义从底部弹出的动画 */
  @keyframes slideIn {
    from {
      bottom: -100px; /* 从页面底部外面开始 */
    }
    to {
      bottom: 20px; /* 最终停留在距离页面底部20px的位置 */
    }
  }
}
@media (max-width: 600px) {
  .leaveMessageOption {
    // position: fixed;
    // z-index: 999999;
    // width: 100%;
    // height: 300px;
  }
}
